<script lang="ts" setup>
import { defineProps, reactive, defineEmits } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { delPersonalChannel, manyDelPersonalChannel } from '../../../../api/personalChannel'
import { HttpStatusCode } from "axios"
import { ElMessage, ElMessageBox } from "element-plus"
import { usingNature, energyNature } from '../../../../enums/PersonalChannel'

const emits = defineEmits(['increase', 'updateData'])
const props = defineProps<{
  channelList: ListPersonalChannel[],
  loading: boolean
}>()
let idList = reactive<string[]>([])

const handleSelectionChange = (val: ListPersonalChannel[]) => {
  idList = val.map(item => {
    return item.id
  })
}

const delMany = () => {
  openDelConfirm(idList)
}
//暴露子组件方法
defineExpose({ delMany })
const openDelConfirm = (id: string | string[]) => {
  ElMessageBox.confirm(
      '您确定要删除此车源吗?',
      '删除车源',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delChannel(id)
  })
}
const delChannel = async (id: string | string[]) => {
  let res: Result<string>
  if(typeof id === "string") {
    res = await delPersonalChannel(id)
  } else {
    res = await manyDelPersonalChannel(id)
  }
  if(res.statusCode === HttpStatusCode.Created || res.statusCode === HttpStatusCode.Ok) {
    ElMessage({
      message: res.data as string,
      type: 'success'
    })
    emits('increase', 1, '')
  } else {
    ElMessage({
      message: '删除失败',
      type: 'error'
    })
  }
}
const editChannel = (form: PersonalChannel) => {
  emits('updateData', form)
}

</script>

<template>
  <el-table
      border
      stripe
      v-model:data="props.channelList"
      table-layout="auto"
      v-loading="loading"
      style="width: 100%"
      height="500px"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="30" fixed />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="personalCarName"
        label="车源名称"
        width="160"
        align="center"
    />
    <el-table-column
        prop="brand"
        label="品牌"
        width="80"
        align="center"
    />
    <el-table-column
        prop="personalCarPrice"
        label="指导价(万)"
        width="80"
        align="center"
    />
    <el-table-column
        prop="mileage"
        label="表显里程(万公里)"
        width="120"
        align="center"
    />
    <el-table-column
        prop="registrationDate"
        label="初次上牌日"
        width="100"
        align="center"
    />
    <el-table-column
        prop="homeLocation"
        label="车辆归属地"
        width="100"
        align="center"
    />
    <el-table-column
        prop="location"
        label="车辆所在地"
        width="100"
        align="center"
    />
    <el-table-column
        label="能源种类"
        width="120"
        align="center"
    >
      <template #default="scope">
        <el-tag>
          {{energyNature.find(item => item.value === scope.row.energy).label}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="emissionStandard"
        label="排放标准"
        width="100"
        align="center"
    />
    <el-table-column
        prop="insuranceDate"
        label="保险到期日"
        width="100"
        align="center"
    />
    <el-table-column
        prop="gearbox"
        label="排量/变速箱"
        width="100"
        align="center"
    />
    <el-table-column
        prop="annualInspection"
        label="年检到期日"
        width="100"
        align="center"
    />
    <el-table-column
        label="使用性质"
        width="120"
        align="center"
    >
      <template #default="scope">
          <el-tag>{{usingNature.find(item => item.value === scope.row.usingNature).label}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        :show-overflow-tooltip="true"
        prop="phone"
        label="联系电话"
        width="90"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        prop="description"
        label="车辆描述"
        align="center"
    />
    <el-table-column
        prop="useCoin"
        label="所需积分"
        width="80"
        align="center"
    />
    <el-table-column
        prop="buyCount"
        label="被购买次数"
        width="80"
        align="center"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        label="是否锁定"
        width="90"
        align="center"
    >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>锁定天数: {{ scope.row.lockDay }}</div>
            <div>开始时间: {{ scope.row.startLockDate }}</div>
            <div>结束时间: {{ scope.row.endLockDate }}</div>
          </template>
          <template #reference>
            <el-tag type="danger" v-if="scope.row.isLock">已锁定</el-tag>
            <el-tag v-else>未锁定</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
        :show-overflow-tooltip="true"
        label="是否下架"
        width="90"
        align="center"
    >
      <template #default="scope">
        <el-tag type="danger" v-if="scope.row.outed">已下架</el-tag>
        <el-tag v-else>未下架</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="description"
        label="操作"
        align="center"
        fixed="right"
        width="120"
    >
      <template #default="scope">
        <el-button type="warning" size="small" :icon="Edit" circle @click="editChannel(scope.row)" />
        <el-button type="danger" size="small" :icon="Delete" circle @click="openDelConfirm(scope.row.id)" />
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>

</style>